<template>
  <div>
    <UserManageQuery
      :query="query"
      :loadTableList="loadTableList"
      :clearQuery="clearQuery"
      :removeQueryField="removeQueryField"
      @changeTreeSelectDepartment="changeDepartment"
    />
    <UserManageTable
      :table="table"
      :query="query"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :showPermissionViewButton="showPermissionViewButton"
      :showUploadPhotoButton="showUploadPhotoButton"
      :operatorColumnWidth="operatorColumnWidth"
      @addRow="addRow"
      @editRow="editRow"
      @permissionView="permissionView"
      @menuView="menuView"
    />
    <UserAddOrEditDialog
      ref="dialogRef"
      :action="action"
    />
    <UserPermissionView
      ref="UserPermissionViewDialogRef"
      />
  </div>
</template>

<script lang="ts" setup>
import UserManageQuery from '@/views/page/authority/usermanage/UserManageQuery.vue';
import UserManageTable from '@/views/page/authority/usermanage/UserManageTable.vue';
import UserAddOrEditDialog from '@/views/page/authority/usermanage/UserAddOrEditDialog.vue';
import UserPermissionView from '@/views/page/authority/usermanage/UserPermissionView.vue';
import {
  getCurrentInstance, onMounted, defineExpose, provide, ref, nextTick, withDefaults, defineProps,
} from 'vue'; // 使用proxy代替ctx，因为ctx只在开发环境有效
import useTableList from '@/api/common/useTableList';
import { Role, User } from '@/types/interface/auth_interface';
import Request from '@/api/request/request';

const { proxy } = getCurrentInstance();
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  showPermissionViewButton?:boolean, // 是否显示权限预览按钮
  showUploadPhotoButton?:boolean, // 是否显示上传按钮
  operatorColumnWidth?:number, // 表格操作列宽度
}
const props = withDefaults(defineProps<Props>(), {
  showPermissionViewButton: true,
  showUploadPhotoButton: true,
  operatorColumnWidth: 400,
});

// 表格工具必备参数
const {
  table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage,
} = useTableList(proxy.$urls.API_URL_BACKSTAGE_USER_MANAGE);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

// 根据部门读取账户信息，主要暴露给父组件调用
const getUsersByDepartmentId = (departmentId:number):void => {
  // 是否清空条件按实际需求决定，目前决定是不清空
  // clearQuery();
  query.value['department.id'] = departmentId;// 加上部门查询条件
  loadTableList();
};
// 当修改treeselect中的部门信息时
const changeDepartment = (departmentId:string) => {
  proxy.$emit('changeTreeSelectDepartment', departmentId);
};
// 表单对象，可以在这里加上表单默认值W
const action = ref('get');
// 打开对话框
const dialogRef = ref();
// 点击添加按钮
const addRow = async () => {
  const form = {
    // department: {}, //  创建空对象，防止部门下拉框的form.department.id出错
    sex: 0,
    status: 1,
  };
  action.value = 'post';
  await nextTick();
  dialogRef.value!.openDialog(form);
};

// 编辑单行记录。
const editRow = async (row:User) => {
  action.value = 'put';
  // 读取账户信息
  const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_USER_MANAGE}/${row.id}`).get();
  if (resData.success) {
    const form = resData.data;
    await nextTick();
    dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
  }
};

const UserPermissionViewDialogRef = ref();
// 权限预览
const permissionView = (userId:number) => {
  UserPermissionViewDialogRef.value.openDialog(userId, false);
};

const menuView = (userId:number) => {
  UserPermissionViewDialogRef.value.openDialog(userId, true);
};

defineExpose({ // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  getUsersByDepartmentId,
});
</script>
<style lang="scss" scoped>

</style>
